<template>
  <div class="address-form-container">
    <h2 class="form-title">{{ isEdit ? '编辑地址' : '新增地址' }}</h2>

    <el-form :model="form" label-width="100px" class="address-form">

      <!-- 收货人 -->
      <el-form-item label="收货人">
        <el-input v-model="form.consignee" placeholder="请输入收货人姓名">
          <template #prefix>
            <el-icon name="user" style="margin-right: 8px; color: #999;" />
          </template>
        </el-input>
      </el-form-item>

      <!-- 手机号 -->
      <el-form-item label="手机号">
        <el-input v-model="form.phone" placeholder="请输入手机号">
          <template #prefix>
            <el-icon name="phone" style="margin-right: 8px; color: #999;" />
          </template>
        </el-input>
      </el-form-item>

      <!-- 省市区 -->
      <el-form-item label="省市区">
        <div class="location-inputs">
          <el-input v-model="form.province" placeholder="省份" style="flex: 1" />
          <el-input v-model="form.city" placeholder="城市" style="flex: 1; margin: 0 10px" />
          <el-input v-model="form.district" placeholder="区县" style="flex: 1" />
        </div>
      </el-form-item>

      <!-- 详细地址 -->
      <el-form-item label="详细地址">
        <el-input v-model="form.detail" type="textarea" rows="3" placeholder="请输入街道信息" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-button type="primary" @click="submitAddress" class="submit-btn" :loading="loading">
        {{ isEdit ? '保存修改' : '提交地址' }}
      </el-button>
    </el-form>
  </div>
</template>



<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { addNewAddress, getAddressById, updateAddress } from '@/apis/address.js'

const router = useRouter()
const route = useRoute()

const form = ref({
  consigne: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  detail: ''
})

const isEdit = ref(false)

// 加载地址数据（用于编辑）
const loadAddress = async () => {
  const id = route.query.id
  if (id) {
    const res = await getAddressById(id)
    if (res.code === 0) {
      form.value = res.data
      isEdit.value = true
    }
  }
}

// 提交地址
const submitAddress = async () => {
  try {
    if (isEdit.value) {
      await updateAddress(form.value)
    } else {
      await addNewAddress(form.value)
    }
    router.push('/address')
  } catch (error) {
    console.error('操作失败:', error)
    alert('操作失败')
  }
}

onMounted(() => {
  loadAddress()
})
</script>

<style scoped lang="scss">
$primary-color: #d4a373;
$light-gray: #f5f5f5;

.address-form-container {
  max-width: 600px;
  margin: 30px auto;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form-title {
  text-align: center;
  color: #333;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
}

.address-form {
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #444;
  }

  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ddd;
    padding-left: 35px;
    transition: all 0.3s ease;
    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.15);
    }
  }

  .location-inputs {
    display: flex;
    gap: 10px;
    :deep(.el-input input) {
      text-align: center;
    }
  }

  // 自定义图标前缀宽度
  :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
  }
}

.submit-btn {
  width: 100%;
  margin-top: 25px;
  background-color: $primary-color;
  border: none;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: lighten($primary-color, 6%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba($primary-color, 0.2);
  }

  &:active {
    transform: scale(0.98);
  }
}
</style>


